<template>
	<div>
		<dl>
			<dt>
				<ul class="search-option">
					<li @click="changeType(0)" :class="{ active: type == 0 }">单曲</li>
					<li @click="changeType(1)" :class="{ active: type == 1 }">专辑</li>
					<li @click="changeType(2)" :class="{ active: type == 2 }">歌手</li>
					<li @click="changeType(3)" :class="{ active: type == 3 }">MV</li>
					<li @click="changeType(4)" :class="{ active: type == 4 }">歌词</li>
					<li @click="changeType(5)" :class="{ active: type == 5 }">歌单</li>
					<li @click="changeType(6)" :class="{ active: type == 6 }">主播歌单</li>
					<li @click="changeType(7)" :class="{ active: type == 7 }">用户</li>
				</ul>
			</dt>
			<dd>
				<Songs v-show="isShow[0]"></Songs>
				<Albums v-show="isShow[1]"></Albums>
			</dd>
		</dl>
	</div>
</template>

<script>
	import Songs from '@/components/search/Songs.vue'
	import Albums from '@/components/search/Albums.vue'
	export default {
		components: {
			Songs,
			Albums
		},
		data: function() {
			return {
				data: null,
				keywords: '',
				amount: 0,
				total: 1,
				type: 0,
				isShow: [true, false]
			}
		},
		methods: {
			changeType: function(type) {
				this.search(this.keywords, type)
			},
			search: function(keywords, type, offset) {
				this.keywords = keywords || this.keywords
				this.offset = offset || offset === 0 ? offset : this.offset
				var searchType = this.$store.state.searchType[type]
				var that = this
				if(this.keywords) {
					this.$store.dispatch('search', {
						keywords: this.keywords,
						offset: 0,
						type: searchType
					}).then(function(response) {
						that.display(response.body.result, type)
					})
				}
			},
			display: function(data, type) {
				this.data = data
				this.type = type
				var that = this
				this.isShow.forEach(function(value, index) {
					that.isShow[index] = false
				})
				this.isShow[this.type] = true
				this.$children[this.type].data = this.data
			}
		}
	}
</script>

<style>
	ul.search-option {
		display: inline-block;
		font-size: 12px;
		padding: 0px;
		height: 40px;
		margin: 0px;
	}
	
	ul.search-option li:first-child {
		padding-left: 5px;
	}
	
	ul.search-option li:last-child {
		padding-right: 5px;
	}
	
	ul.search-option li {
		height: 40px;
		border-top: 1.5px solid #E3E3E3;
		background-color: #F7F7F7;
		padding: 10px;
		display: block;
		width: 95px;
		float: left;
	}
	
	ul.search-option li.active {
		border-width: 1px 1px 0px 1px;
		border-style: solid;
		border-color: #E3E3E3;
		background-color: #FFF;
	}
	
	ul.search-option li:hover,
	ul.search-option li.active {
		border-top: 1.5px solid red;
	}
	
	ul.search-option li {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	ul.search-option li {}
</style>